<template>
  <div>
    <div>1</div>
    <h1>2</h1>
    <p>3</p>
    <ul>
      4
    </ul>
    <ol>
      5
    </ol>
    <hr />
    <a href="">1</a>
    <span>2</span>
    <i>3</i>
    <em>4</em>
    <button @click="headleAdd">嘉嘉</button>
    <button @click="headleOdd">
      <h2>Login：奇数++</h2>
    </button>
    <h2>{{ $store.state.sum }}</h2>
    <h2>{{ $route.query.id }}</h2>
    <h2>{{ $route.query.name }}</h2>
    <h2>{{ $store.getters.total }}</h2>
    <a href="">盒子</a>
    <div class="sj"></div>
    <div class="a"></div>
    <img src="../assets/test/10.jpg" alt="" />
    <img src="../assets/test/10.jpg" alt="" />
    <input type="text" :value="name" @input="handleInput" />
    <h3>{{ name }}</h3>
    <Midd :all="name" />
  </div>
</template>
<script>
import Midd from "../components/Midd";
export default {
  components: { Midd },
  data() {
    return {
      name: "张三",
    };
  },
  created() {
    console.log(this.$route.params);
    console.log(this.$route.query);
    this.$post("admin/login", {
      username: "admin",
      password: "123456",
    }).then((res) => {
      if (res.code === 0) {
        window.sessionStorage.setItem("token", res.data.token);
      }
    });

    function stageAddtion(n) {
      if (n >= 100) return n;
      return n + stageAddtion(n + 1);
    }
    console.log(stageAddtion(1));
  },
  methods: {
    handleInput(e) {
      console.log(e.target);
      this.name = e.target.value;
      console.log(e.target.value);
    },

    headleAdd() {
      this.$store.commit("Add", 1);
    },
    headleOdd() {
      this.$store.dispatch("Odd", 5);
    },
  },
};
</script>
<style lang="less" scoped>
// a {
//   display: flex;
//   border: 1px solid red;
//   width: 200px;
//   height: 200px;
//   display: block;
//   box-sizing: border-box;
// }
.sj {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: red;
}
img {
  width: 200px;
  height: 200px;
}
</style>
